<template>
  <page-container>
    <a-card :bordered="false">
      <a-form layout="inline">
        <a-form-item>
          <a-input v-model="chargeParam.mobile" placeholder="手机号"></a-input>
        </a-form-item>
        <a-form-item>
          <a-input-number v-model="chargeParam.price" placeholder="扣款金额"></a-input-number>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="onUserCharge" icon="dollar">扣款</a-button>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="onUserAdd" icon="wallet">充值</a-button>
        </a-form-item>
      </a-form>
      <a-divider />
      <div class="table-operator">
        <a-form layout="inline">
          <a-form-item>
            <a-input v-model="queryParam.mobile" placeholder="手机号"></a-input>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" @click="handleSearch(true)" icon="search">查询</a-button>
          </a-form-item>
        </a-form>
      </div>
      <s-table
        ref="table"
        rowKey="id"
        :columns="columns"
        :data="loadData"
        :pagination="pagination"
      >
        <template slot="head_img" slot-scope="text">
          <a-avatar shape="square" :size="32" icon="user" :src="text" />
        </template>
      </s-table>
    </a-card>
  </page-container>
</template>

<script>
import { userWalletList, userWalletAdd, userWalletCharge } from '@/api/stat'
import formTableMixin from '@/mixins/formTableMixin'
const columns = [
  {
    title: '名称',
    dataIndex: 'name'
  },
  {
    title: '头像',
    dataIndex: 'head_img',
    scopedSlots: { customRender: 'head_img' }
  },
  {
    title: '手机号',
    dataIndex: 'mobile'
  },
  {
    title: '充值金额',
    dataIndex: 'price',
    customRender (text) {
      return '￥' + text
    }
  },
  {
    title: '当前余额',
    dataIndex: 'topup_money',
    customRender (text) {
      return '￥' + text
    }
  },
  {
    title: '备注',
    dataIndex: 'remark',
    customRender (text, record) {
        return record.out_trade_no === '1' ? text + '(老系统转入)' : text
    }
  },
  {
    title: '充值时间',
    dataIndex: 'ctime'
  }
]
export default {
  mixins: [formTableMixin],
  data () {
    this.columns = columns
    this.listAction = userWalletList
    return {
      chargeParam: {}
    }
  },
  methods: {
    checkData (content) {
      let status = true
      if (!this.chargeParam.mobile) {
        this.$message.warning(`请填写${content}手机号`)
        status = false
      }
      if (!this.chargeParam.price) {
        this.$message.warning(`请填写${content}金额`)
        status = false
      }
      return status
    },
    onUserCharge () {
      this.handleStep('扣款', userWalletCharge)
    },
    onUserAdd () {
      this.handleStep('充值', userWalletAdd)
    },
    handleStep (content, action) {
      if (!this.checkData(content)) return false
      this.$confirm({
        title: `确定要给该用户${content}吗?`,
        content: h => (
          <div>
            手机号:{this.chargeParam.mobile}&emsp;金额:￥{this.chargeParam.price}
          </div>
        ),
        onOk: () => {
          return action(this.chargeParam).then(res => {
            this.$message.success(`${content}成功`)
            this.$refs.table.refresh()
          })
        }
      })
    }
  }
}
</script>
